import { DrawerForm } from '@ant-design/pro-form';
import {
    Descriptions,
    Divider,
    Spin,
    Tag,
    Typography,
    
} from 'antd';
import React, { useEffect, useRef, useState } from 'react';
import { useAccess } from 'umi';

interface DetailsNewsProps {
    id: string;
    name: string;
    onRefurbish: () => void;
}

const DetailsNews: React.FC<DetailsNewsProps> = ({ id, name, onRefurbish }) => {
    const access = useAccess();

    const [details, setDetailsState] = useState<NewsData.PageResult>();



    /**
     * 获取 详情
     * @param key
     */
    const loadNewsDetails = async () => {
        try {
            // const response = await selectCuesActive({ id });
            // if (response.code === 0) {
            //   setDetailsState(response.data);
            //   console.log('=======', details?.cascaderAssignOrganizations);
            // }
        } catch (error) { }
    };


    return (
        <DrawerForm
            key="details_details_drawer_form"
            title={details?.title}
            drawerProps={{
                // maskClosable: false,
                destroyOnClose: true,
                width: 900,
            }}
            trigger={<a>{name}</a>}
            onOpenChange={(visible) => {
                if (visible) {
                    loadNewsDetails();
                } else {
                    onRefurbish();
                }
            }}
            submitter={false}
        >
            <Spin
                style={{
                    textAlign: 'center',
                }}
                spinning={details === undefined}
            >
                {details !== undefined && (
                    <>
                        <Descriptions>
                            <Descriptions.Item label="标题">
                                {details?.title}
                            </Descriptions.Item>
                            <Descriptions.Item label="发布日期">{details?.pubtime}</Descriptions.Item>
                            <Descriptions.Item label="发布媒体">{details?.site}</Descriptions.Item>
                            <Descriptions.Item label="摘要">{details?.summaries}</Descriptions.Item>
                        </Descriptions>
                        {/* <Descriptions>
                <Descriptions.Item label="行业">
                  <Space size={[0, 8]} wrap>
                    {details?.articleIndustrys?.map((item) => {
                      return <Tag key={item.value}>{item.label}</Tag>;
                    })}
                  </Space>
                </Descriptions.Item>
              </Descriptions> */}
                        {/* <Descriptions>
                <Descriptions.Item label="标签">
                  {details?.articleLabels.map((item) => {
                    return <Tag key={item.value}>{item.label}</Tag>;
                  })}
                </Descriptions.Item>
              </Descriptions> */}

                        <Divider />
                        {details?.title ? (
                            <Typography.Title level={3} style={{ textAlign: 'center' }}>
                                {details?.title}
                            </Typography.Title>
                        ) : (
                            <Typography.Title level={3} style={{ textAlign: 'center' }}>
                                暂无标题
                            </Typography.Title>
                        )}
                        <br />
                        {details?.content ? (
                            <div
                                dangerouslySetInnerHTML={{
                                    __html: `${details?.content}`,
                                }}
                            />
                        ) : (
                            <>暂无新闻内容</>
                        )}
                    </>
                )}
            </Spin>
        </DrawerForm>
    );
};

export default DetailsNews;
